<template>
	<view class="ttd-show-modal" v-show="show">
		<view class="container">
			<view class="icon" @tap="closeModal">
				<icon type="cancel" size="26"/>
			</view>
			<view class="img">
				<image :src="modalImage" mode="widthFix" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			show: Boolean
		},
		data() {
			return {
				modalImage: '../../static/activity/propaganda.jpg'
			}
		},
		methods: {
			closeModal() {
				this.$emit('closeModal')
			}
		}
	}
</script>

<style scoped>
	.ttd-show-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(40, 44, 53,.5);
		z-index: 999;
	}
	.container {
		width: 600rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.img {
		width: 100%;
	}
	.img > image {
		width: 100%;
	}
	.icon {
		position: absolute;
		top: 2%;
		right: 2%;
	}
</style>
